import React, {useState} from 'react';
import {ReloadOutlined, LinkOutlined} from '@ant-design/icons';
import {Card, Typography, Button, Space, Select, Input, Image} from 'antd';
import clsx from 'clsx';
import styles from './styles.module.css';
import {ISoundedToImageFormData, defaultFormData, placeHolderText} from "./types.ts";
import {HelpButton} from "./Help";
import {UploadImage} from './Upload';

const {Title, Text} = Typography;
const {TextArea} = Input;
const {Option} = Select;


const FormItemLabel: React.FC<{ label: string; required?: boolean }> = ({
                                                                            label,
                                                                            required = false,
                                                                        }) => (
    <div className={styles.labelContainer}>
        <Text>
            {label} {required && <span className={styles.required}>*</span>}
        </Text>
    </div>
);


const SoundToImagePage: React.FC = () => {
    const [formData, setFormData] = useState<ISoundedToImageFormData>(defaultFormData);
    const [padUploadVisible, setPadUploadVisible] = useState<boolean>(false);
    const [phoneUploadVisible, setPhoneUploadVisible] = useState<boolean>(false);

    const handleInputChange = (name: keyof ISoundedToImageFormData, value: string) => {
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    const handleImport = () => {
        alert('导入')
    }

    const handleReset = () => {
        // 重置表单数据
        setFormData(defaultFormData);
    };

    const generateLink = () => {
        // 实现生成链接的逻辑
        console.log('生成链接', formData);
    };

    return (
        <div className={styles.wrapper}>
            <div className={styles.container}>
                <div className={styles.header}>
                    <div
                        className={clsx(styles.button)}
                        onClick={handleImport}>
                        <span className={styles.icon}><LinkOutlined/></span>
                        <span className={styles.btnText}>导入链接</span>
                    </div>
                    <div
                        className={clsx(styles.button)}
                        onClick={handleReset}>
                        <span className={styles.icon}><ReloadOutlined/></span>
                        <span className={styles.btnText}>重置输入</span>
                    </div>
                </div>

                <div className={styles.title}>
                    <Title level={3}>文生图</Title>
                </div>

                <div className={styles.formContainer}>
                    <Card className={styles.formCard}>
                        <Space direction="vertical" size="large" style={{width: '100%'}}>
                            {/* 语音引导类型 */}
                            <div className={styles.formItem}>
                                <FormItemLabel label="语音引导类型" required/>
                                <Select
                                    className={styles.selectInput}
                                    onChange={(value) => {
                                        handleInputChange('guideType', value);
                                    }}
                                    style={{width: '100%'}}
                                    value={formData.guideType}>
                                    <Option value="普通引导">普通引导</Option>
                                    <Option value="创意引导">创意引导</Option>
                                    <Option value="教育引导">教育引导</Option>
                                </Select>
                            </div>

                            {/* 开场词 */}
                            <div className={styles.formItem}>
                                <FormItemLabel label="开场词" required/>
                                <TextArea
                                    placeholder={placeHolderText}
                                    className={styles.textAreaInput}
                                    onChange={(e) => {
                                        handleInputChange('openingWords', e.target.value);
                                    }}
                                    rows={4}
                                    value={formData.openingWords}
                                    autoSize
                                />
                            </div>

                            {/* 背景图 */}
                            <div className={styles.formItem}>
                                <FormItemLabel label="背景图"/>
                                <div className={styles.backgroundContainer}>
                                    <div className={styles.backgroundPreview}>
                                        <div className={styles.bgTitle}>平板电脑/Pad</div>
                                        <div className={clsx(styles.bgImg, styles.padImg)}
                                             onMouseEnter={() => setPadUploadVisible(true)}>
                                            <Image
                                                alt="背景图片预览"
                                                className={styles.previewImage}
                                                preview={false}
                                                width={460}
                                                height={240}
                                                src="https://hanxiaoxin-guest.s3-cn-south-1.qiniucs.com/images/image_processing20210108-25213-14rcla2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20250324T150212Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1800&X-Amz-Credential=x49hM9CmRuXHBp64N1sVcTuRXIeSwMZ76AdLWJe8%2F20250324%2Fkodo%2Fs3%2Faws4_request&X-Amz-Signature=9217c121173e4a56da97e364f3b1c2066622552da5202bd110934722e619421c"
                                            />
                                            <UploadImage visible={padUploadVisible} name={"padBackground"}
                                                         onFinish={(url: string) => {
                                                             handleInputChange('padBackground', url);
                                                         }}/>
                                            <div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className={styles.backgroundPreview}>
                                        <div className={styles.bgTitle}>手机/Phone</div>
                                        <div className={clsx(styles.bgImg, styles.phoneImg)}
                                             onMouseEnter={() => setPhoneUploadVisible(true)}>
                                            <Image
                                                alt="背景图片预览"
                                                className={styles.previewImage}
                                                preview={false}
                                                width={460}
                                                height={240}
                                                src="https://hanxiaoxin-guest.s3-cn-south-1.qiniucs.com/images/image_processing20210108-25213-14rcla2.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20250324T150212Z&X-Amz-SignedHeaders=host&X-Amz-Expires=1800&X-Amz-Credential=x49hM9CmRuXHBp64N1sVcTuRXIeSwMZ76AdLWJe8%2F20250324%2Fkodo%2Fs3%2Faws4_request&X-Amz-Signature=9217c121173e4a56da97e364f3b1c2066622552da5202bd110934722e619421c"
                                            />
                                            <UploadImage visible={phoneUploadVisible} name={"phoneBackground"}
                                                         onFinish={(url: string) => {
                                                             handleInputChange('phoneBackground', url);
                                                         }}/>
                                            <div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* 语音交互 LLM 变量 */}
                            <div className={styles.formItem}>
                                <div className={styles.labelWithHelp}>
                                    <FormItemLabel label="语音交互 LLM 变量"/>
                                    <HelpButton link={"https://www.google.com"}/>
                                </div>
                                <Card className={styles.nestedCard}>
                                    <Space
                                        direction="vertical"
                                        size="middle"
                                        style={{width: '100%'}}>
                                        <div>
                                            <FormItemLabel label="主题" required/>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('topic', e.target.value);
                                                }}
                                                rows={2}
                                                value={formData.topic}
                                                autoSize
                                            />
                                        </div>
                                        <div>
                                            <FormItemLabel label="提问" required/>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('question', e.target.value);
                                                }}
                                                rows={4}
                                                value={formData.question}
                                                autoSize
                                            />
                                        </div>
                                    </Space>
                                </Card>
                            </div>

                            {/* 文生图 prompt 生成 LLM */}
                            <div className={styles.formItem}>
                                <div className={styles.labelWithHelp}>
                                    <FormItemLabel label="文生图 prompt 生成 LLM"/>
                                    <HelpButton link={"https://www.google.com"}/>
                                </div>
                                <Card className={styles.nestedCard}>
                                    <Space
                                        direction="vertical"
                                        size="middle"
                                        style={{width: '100%'}}>
                                        <div>
                                            <Text type="secondary">模板</Text>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('promptTemplate', e.target.value);
                                                }}
                                                rows={2}
                                                value={formData.promptTemplate}
                                                autoSize
                                            />
                                        </div>
                                        <div>
                                            <Text type="secondary">风格</Text>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('promptStyle', e.target.value);
                                                }}
                                                rows={4}
                                                value={formData.promptStyle}
                                                autoSize
                                            />
                                        </div>
                                        <div>
                                            <FormItemLabel label="示例 1 - 输入" required/>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('example1Input', e.target.value);
                                                }}
                                                rows={4}
                                                value={formData.example1Input}
                                                autoSize
                                            />
                                        </div>
                                        <div>
                                            <FormItemLabel label="示例 1 - 输出" required/>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('example1Output', e.target.value);
                                                }}
                                                rows={4}
                                                value={formData.example1Output}
                                                autoSize
                                            />
                                        </div>
                                        <div>
                                            <FormItemLabel label="示例 2 - 输入" required/>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('example2Input', e.target.value);
                                                }}
                                                rows={4}
                                                value={formData.example2Input}
                                                autoSize
                                            />
                                        </div>
                                        <div>
                                            <FormItemLabel label="示例 2 - 输出" required/>
                                            <TextArea
                                                placeholder={placeHolderText}
                                                className={styles.textAreaInput}
                                                onChange={(e) => {
                                                    handleInputChange('example2Output', e.target.value);
                                                }}
                                                rows={4}
                                                value={formData.example2Output}
                                                autoSize
                                            />
                                        </div>
                                    </Space>
                                </Card>
                            </div>
                        </Space>
                    </Card>

                    <Button
                        block
                        className={styles.generateButton}
                        onClick={generateLink}
                        size="large"
                        type="primary">
                        生成链接
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default SoundToImagePage;
